<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <script type="text/javascript" src="tree.js"></script>

		<script type="text/javascript" src="lib/dragdrop.js"></script>
        <script type="text/javascript" src="lib/framework.js"></script>
        <script type="text/javascript" src="lib/schemaJSON.js"></script>
		
    </head>
    <body>
        <style>
            .treeview li.submenu { /* Style for LI that contains sub lists (other ULs). */
                cursor: hand !important;
                cursor: pointer !important;
            }
            
            .treeview ul {
                margin: 0;
                padding: 0;
				
            }
            
            .treeview li {
                list-style-type: none;
                padding-left: 10px;
                margin-bottom: 2px;
                color: #466F93;
                font-weight: bold;
                font-family: verdana, arial, sans serif;
                line-height: 16px;
                font-size: 13px;
            }
			
.title-blue
{
	color:			#466F93;
	font-weight:	bold;
	font-family:	verdana,arial,sans serif;
	line-height:	16px;
	font-size:		12px;
}


div {
	position: absolute;
	
	}
			
        </style>


    	<div id="schema">
	        <span id="result"></span>
    	</div>



	<div id="treeview" style="position:absolute; left:100px; height:200px; width:180px; overflow:inherit;">
        <ul id="treeview" class="treeview"">
            <li style="background:url(../img/white-top-bottom.gif);">
                device 001
                <ul>
                    <li style="background-color:white">
                        03-05-2008
                        <ul>
                            <li>
                                05:50:12
                            </li>
                            <li>
                                05:52:04
                            </li>
                            <li>
                                05:54:50
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li style="background-image:url(../img/white-top-bottom.gif)">
                device 002
            </li>
            <li style="background-image:url(../img/white-top-bottom.gif)">
                device 003
                <ul>
                    <li style="background-color:white">
                        03-05-2008
                        <ul>
                            <li>
                                05:50:12
                            </li>
                            <li>
                                05:52:04
                            </li>
                            <li>
                                05:54:50
                            </li>
                        </ul>
                    </li>
                    <li style="background-color:white">
                        04-05-2008
                        <ul>
                            <li>
                                16:42:00
                            </li>
                            <li>
                                16:43:04
                            </li>
                            <li>
                                05:44:21
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li>
                device 004
            </li>
        </ul>
		</div>
        <script type="text/javascript">
			buildDesign.create(jsLogo);
			buildDesign.create(jsRegion1);
			buildDesign.create(jsRegion2);
			buildDesign.create(jsRegion3);
        	
        createTree("treeview");
 		flatten('treeview', 'contact');

            
/*            function teste2(){
            
                var i = 0;
                while (json.points[i] != null) {
                
                    var tree = document.getElementById(json.points[i].nodeRifer);
                    var newtree = document.createElement("li");
                    if (json.points[i].type != "root") {
                        newtree = tree.getFirstChild().createElement("li");
                    }
                    newtree.setAttribute("id", json.points[i].id);
                    newtree.innerHTML = json.points[i].innerHTML;
                    
                    tree.appendChild(newtree);
                    
                    i++;
                }
                
            }
            
            //teste();
            createTree("treeview", true)
            //ddtreemenu.createTree("treemenu2", false)
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            var json = {
                "points": [{
                    "id": "01052008",
                    "params": ["lat:-43.0938", "long:-21.7372"],
                    "nodeRifer": "treemenu",
                    "innerHTML": "01/05/08",
                    "style": [],
                    "type": "root"
                }, {
                    "id": "02052008",
                    "params": ["lat:-43.0938", "long:-21.7372", ""],
                    "nodeRifer": "treemenu",
                    "innerHTML": "02/05/08",
                    "style": [],
                    "type": "root"
                }, {
                    "id": "tree1",
                    "params": ["lat:-43.0938", "long:-21.7372", ""],
                    "nodeRifer": "01052008",
                    "innerHTML": "10:01:00",
                    "style": [],
                    "type": ""
                
                }, {
                    "id": "tree2",
                    "params": ["lat:-43.0938", "long:-21.7372", ""],
                    "nodeRifer": "01052008",
                    "innerHTML": "10:02:00",
                    "style": [],
                    "type": ""
                }, {
                    "id": "tree3",
                    "params": ["lat:-43.0938", "long:-21.7372", ""],
                    "nodeRifer": "02052008",
                    "innerHTML": "10:03:00",
                    "style": [],
                    "type": "root"
                }]
            };
            
            
            
            function teste(treeid){
                //var ultags = document.getElementById(treeid).getElementsByTagName("ul");
                
                var i = 0;
                while (json.points[i] != null) {
                    var tree = document.getElementById(json.points[i].nodeRifer);
                    
                    if (json.points[i].type == "root") {
                        newtree = document.createElement("li");
                        newtree.setAttribute("id", json.points[i].id);
                        newtree.innerHTML = json.points[i].innerHTML;
                        tree.appendChild(newtree);
                        i++;
                        continue;
                    }
                    
                    //		var ultag = tree.getElementsByTagName("ul");		
                    
                    newtree = document.createElement("li");
                    newtree.setAttribute("id", json.points[i].id);
                    newtree.innerHTML = json.points[i].innerHTML;
                    tree.appendChild(newtree);
                    i++;
                }
                
            }
            
*/            
        </script>
        <script>
        </script>
    </body>
</html>
